<template>
	<view class="image_pre_load">
    <!-- 占位图 -->
    <image :src="currentSrc" v-if="currentSrc !== src" :mode="mode" :lazy-load="true" class="img"></image>
    <!-- 成功加载图片 -->
    <image :src="src.indexOf('/') === 0 ? 'https:' + src : src" v-show="currentSrc === src" :class="imgStyle" :mode="mode" class="img" :lazy-load="true" @load="finished" @error="errored"></image>
	</view>
</template>

<script>
  import PreLoadImg from '@/static/img/resource/PreLoadImg.png'
	export default {
		name: 'image_pre_load',
		props: {
      src: {
        type: String,
      },
      mode: {
        type: String,
        default: 'widthFix',
      }
		},
    created(){
    },
		data() {
			return {
        currentSrc: PreLoadImg, // 当前默认展示的Src
        errSrc: '', // 加载错误展示的Src
        imgStyle: '', // 加载图片的class
			}
		},
		computed: {
		},
		methods: {
      finished(){
        this.currentSrc = this.src
        this.imgStyle = 'pic'
      },
      errored(){
        this.currentSrc = this.src
        this.imgStyle = 'pic'
      },
		}
	}
</script>

<style lang="scss" scoped>
	.image_pre_load {
    .img{
      width: 100%;
      height: auto;
    }
    .pic{
      animation: fadein 1s;
    }
	}
</style>
